import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import ListTable from 'components/ListTable'
import { listTable as listTableDuck } from 'ducks'
import getMembers from 'graphql/user/getMembers.graphql'
import getMembersItemPageInfo from 'graphql/user/getMemberPageInfo.graphql'
import deleteTeamMember from 'graphql/user/deleteTeamMember.graphql'
import Icons from 'utils/constents/icons'

const FileList = (url, editurl, link, actionInit) => ({ data }) => {
  const teamOpts = url => [
    {
      src: Icons.EDIT,
      text: '编辑',
      action: () => link(url),
    },
  ]
  const memberOpts = id => [
    {
      src: Icons.DELETE,
      text: '删除该成员',
      action: () => actionInit({
        graphqlAction: deleteTeamMember,
        submitValues: {
          id,
        },
        icon: 'trash alternate',
        title: '删除子组织成员',
        message: '请注意：删除该子组织成员会同时作用于包含该项目的子组织',
      }),
    },
  ]
  return (
    <React.Fragment>
      {data.team_member.map(member => (
        <ListTable.Row>
          <ListTable.Avatar
            src={member.is_team ? Icons.TEAM : member.user_object.avatar}
            url={member.is_team ? `${url}/${member.name}` : undefined}
            text={member.name}
          />
          <ListTable.Time>{member.create_at}</ListTable.Time>
          <ListTable.Action width={2} options={member.is_team ? teamOpts(`${editurl}/${member.name}`) : memberOpts(member.id)} />
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { match, org, link, actionOpen } = this.props
    const orgName = org.owner_object.name
    let { path } = match.params
    const newTeamUrl = path
      ? `/org/${orgName}/user/teams/newTeam/${path}`
      : `/org/${orgName}/user/teams/newTeam`
    const editTeamUrl = path
      ? `/org/${orgName}/user/teams/edit/${path}`
      : `/org/${orgName}/user/teams/edit`
    const globalActions = [
      {
        text: '创建子组织',
        url: newTeamUrl,
      },
    ]
    if (path) {
      globalActions.push({
        text: '添加成员',
        url: `/org/${orgName}/user/teams/invite/${path}`,
      })
    }
    if (!path) path = ''
    const RenderList = FileList(match.url, editTeamUrl, link, actionOpen)
    return (
      <ListTable
        nav={{
          path,
          homeText: '数据首页',
          homePath: `/org/${orgName}/user/teams/list`,
        }}
        globalActions={globalActions}
        search={{ text: '搜索组织' }}
        sort
        pagination={{
          query: getMembersItemPageInfo,
          name: 'team_member_aggregate',
          variables: {
            orgName,
            path,
          },
        }}
        listData={{
          query: getMembers,
          variables: {
            orgName,
            path,
            order: [{ is_team: 'desc' }],
            limit: 10,
          },
          header: (
            <ListTable.Header>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                名称
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>创建时间</ListTable.HeaderCell>
              <ListTable.HeaderCell />
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '当前组织下没有子组织',
          action: {
            text: '创建子组织',
            url: newTeamUrl,
          },
        }}
      />
    )
  }
}

const mapDispatchToProps = {
  link: path => push(path),
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  null,
  mapDispatchToProps,
)(DatasetData)
